<template>
  <div>
    <el-card class="box-card carone">
      <div class="text item textone">
        <el-button type="primary" @click="onImportExcelClick">{{$t('msg.excel.importExcel')}}</el-button>
        <el-button type="success">{{$t('msg.excel.exportExcel')}}</el-button>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="text item">
        <el-table :data="userList" border style="width: 100%">
          <el-table-column type="index" label="#">
          </el-table-column>
          <el-table-column prop="username" :label="$t('msg.excel.name')">
          </el-table-column>
          <el-table-column prop="mobile" :label="$t('msg.excel.mobile')">
          </el-table-column>
          <el-table-column prop="address" :label="$t('msg.excel.avatar')">
            <template class="imgbox" slot-scope="scope">
              <div class="user-avatar">
                <el-avatar :size="60" :src="scope.row.avatar"></el-avatar>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" :label="$t('msg.excel.role')">
            <template class="imgbox" slot-scope="scope">
              <div>
                <el-tag size="mini" v-for="item in scope.row.role" :key="item.id">{{item.title}}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" :label="$t('msg.excel.openTime')">
            <template class="imgbox" slot-scope="scope">
              <!-- {{formatter(scope.row.openTime)}} -->
              {{scope.row.openTime | formatTime}}
              <!-- {{formatter(1433088000000 / 1000)}} -->
            </template>
          </el-table-column>
          <el-table-column prop="address" :label="$t('msg.excel.action')">
            <template class="imgbox" slot-scope="scope">
              <el-button type="primary" size="mini" @click.native="ToUserInfo(scope.row._id)">{{$t('msg.excel.show')}}</el-button>

              <el-button type="info" size="mini" @click="userConf(scope.row)">{{$t('msg.excel.showRole')}}</el-button>
              <el-button type="danger" size="mini" @click="handleDelete(scope.row)">{{$t('msg.excel.remove')}}</el-button>
              <el-dialog title="配置角色" :visible.sync="dialogVisible" width="50%">
                <!-- <span>这是一段信息</span> -->
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="超级管理员"></el-checkbox>
                  <el-checkbox label="管理员"></el-checkbox>
                  <el-checkbox label="人事经理"></el-checkbox>
                  <el-checkbox label="销售经理"></el-checkbox>
                  <el-checkbox label="保安队长"></el-checkbox>
                  <el-checkbox label="员工"></el-checkbox>
                </el-checkbox-group>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[2, 5, 10, 20]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// import moment from "moment"
import dayjs from "dayjs"
import {deleteStaff} from "../../api/staff.js"
import i18n from "../../i18n/index"
export default {
  name: 'Event1Index',

  data() {
    return {
      pagenum:1,
      pagesize:2,
      userList:[],
      total:0,
      dialogVisible:false,
      checkList:[]
    };
  },
  filters:{
    formatTime(val){
      if(!isNaN(val)){
        val = parseInt(val)
      }
      return dayjs(val).format("YYYY-MM-DD")
    }
  },
   computed:{
     listData(){
         return this.$store.getters.language
     }
 },
 watch:{
     listData(val){
         this.changeone()
     }
 },
  created(){
    this.getList()
  },

  mounted() {
    // console.log(this.pagesize);

  },

  methods: {
    async getList(){
      let res = await this.userApi.getUserList(this.pagenum,this.pagesize)
      // console.log(res);
      this.userList = res.list
      this.total = res.total
    },
    changeone(){
      this.getList()
    },
    handleSizeChange(newsize){
      this.pagesize = newsize
      this.getList()
      },

    onImportExcelClick(){
      this.$router.push("/user/import")
    },
      handleCurrentChange(newPage) {
       this.pagenum = newPage
       this.getList()
      },
      ToUserInfo(i){
        let id = i
        this.$router.push({path:`/user/info/${id}`})
      },
        handleDelete(row){
          this.$confirm(`${i18n.t('msg.excel.dialogTitle1')}${row.username}${i18n.t('msg.excel.dialogTitle2')}`, '提示', {
          confirmButtonText: i18n.t('msg.universal.confirm'),
          cancelButtonText: i18n.t('msg.universal.cancel'),
          type: 'warning',
        }).then(async () => {
          let res = await deleteStaff(row._id)
          // console.log(res);
                    this.$message({
            type: 'success',
            message: i18n.t('msg.excel.removeSuccess')
          });   
          // this.pagenum = 1;
          this.getList()
        }).catch(() => {
     
        });

    },
            userConf(row){
              this.dialogVisible = true;
            }
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  padding: 0 0 18px 0;
  margin-bottom: 22px;
  .textone {
    box-sizing: inherit;
    float: right;
  }
  // background-color: red;
}
.el-pagination {
  margin-top: 20px;
  text-align: center;
}
.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
